<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>注册</title>
    <link href="${basePath}/css/bootstrap.min.css" rel="stylesheet">
    <script src="${basePath}/js/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="${basePath}/alert/iosOverlay.css">
 	<script src="${basePath}/alert/iosOverlay.js"></script>
    <script type="text/javascript">
	   	function register(){
	   		if($("#username").parent().attr("class") == "form-group form-group-lg has-success"
	   			&& $("#password").parent().attr("class") == "form-group form-group-lg has-success"
	   			&& $("#confirm").parent().attr("class") == "form-group form-group-lg has-success"
	   			&& $("#nickname").parent().attr("class") == "form-group form-group-lg has-success"){
	   				$("form").submit();
	   			} else {
	   				iosOverlay({text: "请正确填写信息",duration: 1e3,icon: "${basePath}/alert/cross.png"});
	   			}
	   		
	   	}
	   	function isRightUsername() {
	   		var username = $("#username").val();
			if(username == "" || username.length == 0){
				$("#username").parent().attr("class","form-group form-group-lg has-error");
				iosOverlay({text: "用户名不能为空",duration: 1e3,icon: "${basePath}/alert/cross.png"});
				return;
			} else if (username.length >20){
				$("#username").parent().attr("class","form-group form-group-lg has-error");
				iosOverlay({text: "用户名最长20位",duration: 1e3,icon: "${basePath}/alert/cross.png"});
				return;
			}
			$.ajax({
				type:"post",
				url:"${basePath}/register/username",
				dataType:"json",
				data:"username="+username,
				success:function(data){
					var jsonObject = data;
					if(jsonObject.result){
						$("#username").parent().attr("class","form-group form-group-lg has-success");
					} else {
						$("#username").parent().attr("class","form-group form-group-lg has-error");
						iosOverlay({text: "用户名已存在",duration: 1e3,icon: "${basePath}/alert/cross.png"});
					}
					
				}
			});
		}
	   	function isRightNickname() {
			var nickname = $("#nickname").val();
			if(nickname == "" || nickname.length == 0){
				$("#nickname").parent().attr("class","form-group form-group-lg has-error");
				iosOverlay({text: "昵称不能为空",duration: 1e3,icon: "${basePath}/alert/cross.png"});
			} else if (nickname.length >10){
				$("#nickname").parent().attr("class","form-group form-group-lg has-error");
				iosOverlay({text: "昵称最长10位",duration: 1e3,icon: "${basePath}/alert/cross.png"});
			} else {
				$("#nickname").parent().attr("class","form-group form-group-lg has-success");
			}
		}
	   	function isRightPassword() {
	   		var password = $("#password").val();
	   		$("#confirm").parent().attr("class","form-group form-group-lg");
	   		$("#confirm").val("");
			if(password == "" || password.length == 0){
				$("#password").parent().attr("class","form-group form-group-lg has-error");
				iosOverlay({text: "密码不能为空",duration: 1e3,icon: "${basePath}/alert/cross.png"});
			} else if (password.length >30){
				$("#password").parent().attr("class","form-group form-group-lg has-error");
				iosOverlay({text: "密码最长30位",duration: 1e3,icon: "${basePath}/alert/cross.png"});
			} else {
				$("#password").parent().attr("class","form-group form-group-lg has-success");
			}
		}
	   	function isRightConfirm(){
	   		var password = $("#password").val();
	   		var confirm = $("#confirm").val();
	   		if(password != confirm){
				$("#confirm").parent().attr("class","form-group form-group-lg has-error");
				iosOverlay({text: "确认密码错误",duration: 1e3,icon: "${basePath}/alert/cross.png"});
			} else {
				$("#confirm").parent().attr("class","form-group form-group-lg has-success");
			}
	   	}
    </script>
  </head>
  <body style="background: url(${basePath}/img/loginbg.jpg);position: absolute;min-width: 310px;min-height: 480px;width: 100%;height: 100%;">
  	<div style="width: 310px;height: 480px;position: absolute;left: 50%;top: 50%;margin: -240px -155px;" class="panel panel-default">
	  	<div style="width: 290px;height: 460px;position: absolute;left: 10px;top: 10px;" class="panel-body">
		    <form method="post" action="${basePath}/register/insert">
				  	<div class="form-group form-group-lg" style="margin-bottom: 10px;">
					  <label class="control-label" for="username">User name</label>
					  <input type="text" class="form-control" name="username" id="username" onblur="isRightUsername()">
					</div>
					<div class="form-group form-group-lg" style="margin-bottom: 10px;">
					  <label class="control-label" for="password">Password</label>
					  <input type="password" class="form-control" name="password" id="password" onblur="isRightPassword()">
					</div>
					<div class="form-group form-group-lg" style="margin-bottom: 10px;">
					  <label class="control-label" for="confirm">Confirm Password</label>
					  <input type="password" class="form-control" id="confirm" onblur="isRightConfirm()">
					</div>
					<div class="form-group form-group-lg" style="margin-bottom: 10px;">
					  <label class="control-label" for="nickname">Nickname</label>
					  <input type="text" class="form-control" name="nickname" id="nickname" onblur="isRightNickname()">
					</div>
				  <button type="button" class="btn btn-warning btn-block btn-lg" onclick="register()" style="margin-bottom: 10px;">Submit</button>
				  <button type="button" class="btn btn-default btn-block btn-lg" onclick="location.href='${basePath}/index'">Back</button>
				</form>
			</div>
  	</div>
    <script src="${basePath}/js/jquery.min.js"></script>
    <script src="${basePath}/js/bootstrap.min.js"></script>
  </body>
</html>